<template>
  <div id="charts">
      <!-- <h1>具体的图表</h1>      -->
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    //虚拟 dom - vue中更新视图 - 没有直接操作真实dom， 操作虚拟dom
    //虚拟dom - 使用对象结构来描述dom结构的
     /*
    div - {
        tagname: 'div',
        text: '内容',
        attrs: {
            name: 'box',
            class: 'mybx'
        },
        children: [
            {
                tagname: 'p',
                text: '段落',
                attrs: {
                    id: 'part'
                }
            }
        ]
    }
    */
   // 当数据发生了变化 - 在虚拟dom中找哪部分数据发生了变化 - 更新虚拟dom - 隔一会(异步的)根据新的虚拟结构渲染页面
   // 虚拟dom中数据发生变化，如何查找 - 利用标签的key 
     
    //父传子用 props 接收
    props: ['option'],
    //mounted里实现
   mounted() {
     this.mychart = echarts.init(document.querySelector('#charts'))

    this.mychart.setOption(this.option)
    // console.log(this.option);
  },
//   watch:{  
//     option: {
//         handler() {
//             //option 发生变化就要执行代码 用watch监听
//             //只是局部重新渲染
//              this.mychart.setOption(this.option)
//         },
//         deep: true
//     }
//   },
  data () {
    return {
        mychart: null
       }
    },
  methods: {
        
    }
}
</script>

<style lang="scss" scoped>
    #charts{
        width: 600px;
        height: 400px;
    }
</style>
